<template>
    <div class='params_form_container'>
        <el-form ref='paramsForm' :rules='rules' :model='formData' :label-width='labelWidth'>
            <el-form-item :label='params.displayLabel' prop='display_text'>
                <el-input v-model='formData.display_text' autocomplete='off'
                          :placeholder='`请输入${params.displayLabel}`' />
            </el-form-item>
            <el-form-item :label='params.valueLabel' prop='value'>
                <el-input v-model='formData.value' autocomplete='off'
                          :placeholder='`请输入${params.valueLabel}`' />
            </el-form-item>
            <el-form-item label='状态' prop='state'>
                <el-radio-group v-model="formData.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='排序' prop='sn'>
                <el-input v-model='formData.sn' v-int-new autocomplete='off' placeholder='请输入排序' />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'ParamsForm',
    props: {
        params: {
            type: Object,
            default: () => {
                return {
                    displayLabel: '参数名',
                    valueLabel: '参数值',
                }
            },
        },
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        const _this = this;
        return {
            rules: {
                display_text: [
                    { required: true, message: `请输入${_this.params.displayLabel}`, trigger: 'blur' },
                ],
                value: [
                    { required: true, message: `请输入${_this.params.valueLabel}`, trigger: 'blur' },
                ],
            },
            formData: {},
        }
    },
    computed: {
        labelWidth() {
            let labelLength = this.params.displayLabel.length;
            if (labelLength < this.params.valueLabel.length) {
                labelLength = this.params.valueLabel.length;
            }
            if (labelLength < 2) {
                labelLength = 2;
            }
            return `${labelLength + 2}em`;
        },
    },
    watch: {
        options: {
            handler() {
                this.init()
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        init() {
            const _this = this
            if (!_this.row) {
                return
            }
            if (_this.$refs.paramsForm) {
                _this.$refs.paramsForm.clearValidate()
            }
            _this.formData = $.extend({}, { pre_set: 0, state: 1 }, (_this.row || {}))
        },
        async confirm() {
            const _this = this
            let valid = await _this.validateForm('paramsForm')
            if (valid) {
                let subData = $.extend({}, _this.formData);
                if (_this.$utils.isNotEmpty(_this.params.key1)) {
                    subData.key1 = _this.params.key1;
                }
                if (_this.$utils.isNotEmpty(_this.params.key2)) {
                    subData.key2 = _this.params.key2;
                }
                if (_this.$utils.isNotEmpty(_this.params.key3)) {
                    subData.key3 = _this.params.key3;
                }
                return _this.fetchData(_this.$api.API_SaveCommonParameterValue, subData).then(() => {
                    _this.$message.success('保存成功！')
                    return true
                }).catch(() => {
                    return false
                })
            }
            return valid
        },
    },
}
</script>

<style lang='less' rel='stylesheet/less' scoped>
.params_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
